<template>
    <div class="contianer">
        <el-table :data="tableData" style="width: 60%;margin:0 auto">
            <el-table-column label="标题" prop="title" width="100">
                <template slot-scope="scope">
                    <el-image :src="scope.row.fileUid ? scope.row.fileUid : squareUrl" style="width: 40px;"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="标题" prop="title" width="200">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <span style="width: 500px;">{{ scope.row.outsideLink }}</span>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.title }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="简介" prop="summary">
            </el-table-column>
            <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                    <el-button type="success" @click="OpenAddProject">添加项目</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-dialog :visible.sync="openAddprojectBtn" :width="'800px'">
            <div slot="title" class="header-title">
                <span class="title-name">
                    <i class="el-icon-edit" style="margin-right:10px"></i>
                    <span class="title-age">添加项目压缩包</span>
                </span>
            </div>
            <div>
                <el-upload class="upload-demo" drag action="api/util/uploadProject" name="uploadFile" multiple :headers="MyHeader"
                    :on-success="handleProjectSuccess" :on-remove="handleProjectRemove">
                    <i class="el-icon-upload" v-if="wqunProject.outsideLink != ''"></i>
                    <i class="el-icon-upload" v-else>{{ wqunProject.outsideLink }}</i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

                </el-upload>
                <div style="margin-bottom: 40px;">
                    <el-button type="warning" @click="openAddprojectBtn = false" style="float: right;">确认</el-button>
                    <el-button type="primary" @click="wqunProject.outsideLink = ''; openAddprojectBtn = false"
                        style="float: right;margin-right: 10px;">取消</el-button>

                </div>
            </div>

        </el-dialog>

        <el-dialog :visible.sync="openAddproject" :width="'800px'" :height="'200px'" z-index="5">
            <div slot="title" class="header-title">
                <span class="title-name">
                    <i class="el-icon-edit" style="margin-right:10px"></i>
                </span>
                <span class="title-age">添加项目</span>
                <div>
                    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="标题">
                            <el-input v-model="wqunProject.title" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="项目简介">
                            <el-input v-model.number="wqunProject.summary"></el-input>
                        </el-form-item>
                        <el-form-item label="项目路径">
                            <el-input v-model.number="wqunProject.outsideLink"></el-input>
                        </el-form-item>
                        <el-form-item label="封面">
                            <el-upload class="avatar-uploader" action="api/util/uploadImg" name="imgFile" :headers="MyHeader"
                                :show-file-list="false" :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="openAddprojectBtn = true">添加项目文件</el-button>
                            <el-button type="warning" @click="addProject" style="float: right;">提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="openupdateproject" :width="'800px'" :height="'200px'" >
            <div slot="title" class="header-title">
                <span class="title-name">
                    <i class="el-icon-edit" style="margin-right:10px"></i>
                </span>
                <span class="title-age">修改项目</span>
                <div>
                    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="标题">
                            <el-input v-model="wqunProject.title" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="项目简介">
                            <el-input v-model.number="wqunProject.summary"></el-input>
                        </el-form-item>
                        <el-form-item label="项目路径">
                            <el-input v-model.number="wqunProject.outsideLink"></el-input>
                        </el-form-item>
                        <el-form-item label="封面">
                            <el-upload class="avatar-uploader" action="api/util/uploadImg" name="imgFile" :headers="MyHeader"
                                :show-file-list="false" :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="openAddprojectBtn = true">修改项目文件</el-button>
                            <el-button type="warning" @click="updateProject" style="float: right;">修改</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-dialog>


    </div>
</template>

<script>
import { $findAllProject } from '@/assets/api/user.js'
import { $findProjectById } from '@/assets/api/user.js'
import { $deleteUploadProject } from '@/assets/api/user.js'
import { $deleteProject } from '@/assets/api/user.js'
import { $addProject } from '@/assets/api/user.js'
import { $updateProject } from '@/assets/api/user.js'
export default {
    name: "projectAdmin",
    data() {
        return {
            MyHeader:{token: JSON.parse(sessionStorage.getItem("token"))},
            wqunProject: {
                title: '',//项目标题
                summary: '',//项目简介
                fileUid: '',//标题图片uid
                outsideLink: '',//外链
            },
            openAddproject: false,//添加项目按钮
            openAddprojectBtn: false,//添加项目按钮
            openupdateproject: false,
            tableData: [],
            search: '',
            ruleForm: {
                pass: '',
                checkPass: '',
                age: ''
            },
            imageUrl: '',
    
            squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        };
    },
    watch: {
    },
    created() {
        this.findAllProject();
    },
    methods: {

        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.wqunProject.fileUid = res.data.resPath;
            
        },
        handleProjectSuccess(res, file) {
            this.wqunProject.outsideLink = file.response.data.resPath;
        },
        handleProjectRemove(file, fileList) {
            let WqunOOS = {
                oosImgPath: file.response.data.resPath
            }
            $deleteUploadProject(WqunOOS).then((res) => {
                this.$message({
                    type: res.data.success ? 'success' : 'error',
                    message: res.data.message,
                })
            })
        },
        beforeAvatarUpload(file) {
            const isJPG = (file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png');
            const isLt2M = file.size / 1024 / 1024 < 4;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG和PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 4MB!');
            }
            return isJPG && isLt2M;
        },
        //查询所有项目
        findAllProject() {
            $findAllProject().then((res) => {
                if (res.data.success) {
                    this.tableData = res.data.data.findAllProject;
                } else {
                    this.message(res);
                }
            })
        },

        handleEdit(id) {
            this.openupdateproject = true;
            $findProjectById(id).then((res) => {
                if (res.data.success) {
                    this.wqunProject = res.data.data.findProjectById;
                    this.imageUrl = this.wqunProject.fileUid;
                } else {
                    this.$message({
                        type: 'error',
                        message: "项目查找失败",
                    })
                }
            })
        },
        handleDelete(id) {
            this.$confirm('是否删除该项目?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                $deleteProject(id).then((res) => {
                this.message(res);
                if(res.data.success){
                    this.findAllProject();
                }
            })
            }).catch(() => { });
           
        },

        OpenAddProject() {
            this.wqunProject = {};
            this.imageUrl = '';
            this.openAddproject = true;

        },

        addProject() {
            this.$confirm('是否添加该项目?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                $addProject( this.wqunProject).then((res) => {
                   this.message(res);
                    if (res.data.success) {
                        this.wqunProject = {};
                        this.openAddproject = false;
                        this.findAllProject();
                    }
                })
            }).catch(() => { });

        },
        updateProject() {
            this.$confirm('是否修改该项目?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                $updateProject(this.wqunProject).then((res) => {
                    this.$message({
                        type: res.data.success ? 'success' : 'error',
                        message: res.data.message,
                    })
                    if (res.data.success) {
                        this.openupdateproject = false;
                        this.wqunProject = {};
                        this.findAllProject();
                    }
                })
            }).catch(() => { });

        }




    }
};

</script>

<style scoped>
.el-icon-upload {}

.upload-demo {
    margin: 0 auto;
    margin-left: 200px;
    margin-top: 50px;
    height: 250px;
}

.demo-ruleForm {
    padding: 80px;
    padding-bottom: 0px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>